<template>
  <div class="ratingBox">
    <div class="allRatings">
      <p @click="getRating">全部57</p>
      <p>满意</p>
      <p>不满意</p>
    </div>
    <div class="checkRight">
      <input type="checkbox" name="" id=""><p>只看有内容的评价</p>
    </div>
    <div class="ratingText">
      <div class="textBox" v-for="item in ratingArr">
        <div class="text" v-for="rating in item">
          <img :src="rating.avatar" alt="">
          <div class="textWord">
            <h4><b>{{rating.username}}</b><span>{{rating.rateTime}}</span></h4>
            <p>评分:{{rating.score}}</p>
            <b>{{rating.text}}</b>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

  export default {
    methods:{
      ...mapActions(['getRating'])
    },
    computed:{
      ...mapState(['ratingArr'])
    }
  }
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.allRatings{
  display: flex;
  padding: 4.68vw 0vw 4.68vw 0vw;
  margin: 0vw 4.68vw 0vw 4.68vw;
  border-bottom: 1px solid rgba(0,0,0,0.3);
}
.allRatings p{
  padding: 2.68vw;
  margin-right: 2vw;
  font-size: 3.6vw;
}
.allRatings p:nth-of-type(1){
  padding: 2.68vw;
  background-color: rgb(0,160,220);
  margin-right: 2vw;
  color: white;
}
.allRatings p:nth-of-type(2){
  padding: 2.68vw;
  background-color: rgba(0,160,220,0.5);
  margin-right: 2vw;
}
.allRatings p:nth-of-type(3){
  padding: 2.68vw;
  background-color: rgba(0,0,0,0.2);
  margin-right: 2vw;
}
.checkRight{
  display: flex;
  padding: 2.68vw 0 2.68vw 0;
  line-height: 5.5vw;
  border-bottom: 0.133vw solid rgba(0,0,0,0.3);
}
.checkRight input{
  height: 4.8vw;
  width: 4.8vw;
  margin-left: 4.68vw;
  margin-right: 4.68vw;
  border-radius: 50%;
}
.text{
  height: 25vw;
  padding: 2.68vw;
  border-bottom: 1px solid rgba(0,0,0,0.3);
  display: flex;
}
.text img{
  height: 7.467vw;
  border-radius: 50%;
}
.text b{
  font-weight: 500;
}
.textWord h4{
  display: flex;
  justify-content: space-between;
}
</style>